<template>
  <div class="file-test-container">
    <h2>文件上传与删除测试</h2>

    <!-- 文件上传 -->
    <el-upload
      class="upload-demo"
      action="#"
      :auto-upload="false"
      :on-change="handleFileChange"
      :show-file-list="false"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button type="success" @click="handleUpload">上传文件</el-button>
      <el-button type="success" @click="getAllFileFastDFS">获取所有文件</el-button>
      <el-button type="success" @click="getAllFileFastDFS2">打印文件服务器信息</el-button>
      <el-button type="success" @click="getAllFileFastDFS3">打印文件组信息下的所有文件</el-button>
    </el-upload>

    <!-- 显示上传结果 -->
    <div v-if="fileUrl" class="upload-result">
      <p>文件上传成功！文件地址：{{ fileUrl }}</p>
      <el-button type="primary" @click="handleDownload">下载文件</el-button>
      <el-button type="danger" @click="handleDelete">删除文件</el-button>
    </div>

    <!-- 错误提示 -->
    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import request from '../utils/request';
import { ElMessage } from 'element-plus';

const file = ref(null); // 选择的文件
const fileUrl = ref(''); // 上传后的文件地址
const errorMessage = ref(''); // 错误信息

// 文件选择回调
const handleFileChange = (uploadFile) => {
  debugger;
  file.value = uploadFile.raw;
};

const getAllFileFastDFS = async () => {
  const response = await request.post('/file/listStorageNodes', {"sign": "1"});
  debugger;
  console.log(response.data);
}

const getAllFileFastDFS2 = async () => {
  const response = await request.post('/file/printNodes', {"sign": "1"});
  debugger;
  console.log(response.data);
}

const getAllFileFastDFS3 = async () => {
  const response = await request.post('/file/printByGroup', {"groupName": "group1"});
  debugger;
  console.log(response.data);
}

// 上传文件
const handleUpload = async () => {
  if (!file.value) {
    ElMessage.warning('请先选择文件');
    return;
  }

  const formData = new FormData();
  formData.append('file', file.value);
  debugger;
  try {
    const response = await request.post('/file/upload', formData, {
    //const response = await request.post('/minio/upload', formData, {  minio的存储路径
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    fileUrl.value = response.data; // 假设后端返回文件地址
    ElMessage.success('文件上传成功！');
    errorMessage.value = '';
  } catch (error) {
    errorMessage.value = '文件上传失败：' + error.message;
    ElMessage.error('文件上传失败');
  }
};

// 下载文件
const handleDownload = async () => {
  if (!fileUrl.value) {
    ElMessage.warning('没有可下载的文件');
    return;
  }
debugger;
  try {
    const response = await request.post('/file/download', {
        fileUrl: fileUrl.value,
      responseType: 'blob', // 告诉服务器返回的是二进制数据
    });

    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    // 从文件 URL 中提取文件名，这里简单假设文件名在 URL 最后一部分
    const fileName = fileUrl.value.split('/').pop();
    link.setAttribute('download', fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
    ElMessage.success('文件下载成功！');
  } catch (error) {
    errorMessage.value = '文件下载失败：' + error.message;
    ElMessage.error('文件下载失败');
  }
};

// 删除文件
const handleDelete = async () => {
  if (!fileUrl.value) {
    ElMessage.warning('没有可删除的文件');
    return;
  }

  try {
    await request.delete('/file/delete', {
      params: {
        fileUrl: fileUrl.value,
      },
    });
    ElMessage.success('文件删除成功！');
    fileUrl.value = '';
    errorMessage.value = '';
  } catch (error) {
    errorMessage.value = '文件删除失败：' + error.message;
    ElMessage.error('文件删除失败');
  }
};
</script>

<style scoped>
.file-test-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.upload-demo {
  margin-bottom: 20px;
}

.upload-result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style>